<template>
    <el-drawer :model-value="!isCollapse" :with-header="false" direction="ltr" @close="close" size="200px" custom-class="drawer-custom">
        <Logo/>
        <menu-main/>
    </el-drawer>
</template>
<script>
import { computed, ref } from 'vue'
import MenuMain from '../Menu'
import Logo from '../Logo'
import {useStore} from 'vuex'
    export default {
        name: 'MObieMenuName',
        components: {MenuMain, Logo},
        setup() {
            const store = useStore()
            const isCollapse = computed(()=>store.getters.getIsCollapse)
            const close = () => {
                store.commit('setIsCollapse', true)
            }
            return {
                isCollapse,
                close
            }
        }
    }
</script>
<style>
.drawer-custom .el-drawer__body{
    padding: 0;
    background-color: #001529;
}
</style>